// sheep/components/s-share-modal/canvas-poster/poster/ecard.js
import { getWxaQrcode, formatImageUrlProtocol } from './index.js';
import $url from '@/sheep/url';
import $platform from '@/sheep/platform';

/**
 * 生成名片海报 - 与详情页卡片完全一致
 * @param {Object} options - 海报生成选项
 * @param {number} options.width - 海报宽度
 * @param {number} options.height - 海报高度（不传则按比例自动计算）
 * @param {Object} options.shareInfo - 分享信息，包含poster对象
 * @returns {Object} 海报配置
 */
export default async function(options = {}) {
  // 标准名片比例 - 与CardRenderer中的尺寸一致
  const width = options.width || 750;
  const height = options.height || (width * 0.56); // 标准名片尺寸比例约为16:9
  
  console.log('生成电子名片海报，尺寸:', width, 'x', height);
  
  // 从shareInfo中获取完整的卡片和模板数据
  const poster = options.shareInfo?.poster || {};
  const templateData = poster.templateData || null;
  const cardData = poster.cardData || {};
  const displayConfig = poster.displayConfig || {};
  const currentSide = poster.side || 'front';
  
  console.log('生成海报数据:', {
    templateId: poster.templateId,
    hasTemplate: !!templateData,
    cardDataKeys: Object.keys(cardData),
    displayConfig: displayConfig,
    side: currentSide
  });
  
  try {
    // 如果没有模板数据，检查是否有基本字段
    if (!templateData && !cardData) {
      throw new Error('生成海报所需的模板或卡片数据缺失');
    }
    
    // 创建基础元素
    const elements = [];
    
    // 1. 添加外层背景
    elements.push({
      type: 'rect',
      css: {
        width: `${width}rpx`,
        height: `${height + 60}rpx`, // 添加一些额外空间用于阴影和边距
        color: '#f8f9fa', // 使用与详情页一致的背景色
        top: '0rpx',
        left: '0rpx'
      }
    });
    
    // 2. 添加卡片主体背景（带阴影和边框）
    elements.push({
      type: 'rect',
      css: {
        width: `${width - 40}rpx`, // 左右各留20rpx边距
        height: `${height}rpx`,
        color: '#FFFFFF',
        top: '20rpx',
        left: '20rpx',
        borderRadius: '20rpx',
        shadowBlur: '24rpx',
        shadowColor: 'rgba(0, 0, 0, 0.08)'
      }
    });
    
    // 3. 如果有模板数据，使用模板定义的背景
    if (templateData) {
      // 获取当前面的背景设置
      const background = currentSide === 'front' 
        ? templateData.frontBackground 
        : templateData.backBackground;
      
      if (background) {
        // 背景可能是颜色或图片
        if (background.type === 'image' && background.value) {
          elements.push({
            type: 'image',
            src: background.value,
            css: {
              width: `${width - 40}rpx`,
              height: `${height}rpx`,
              top: '20rpx',
              left: '20rpx',
              borderRadius: '20rpx'
            }
          });
        } else if (background.type === 'color' && background.value !== '#FFFFFF') {
          // 如果背景颜色不是白色，才添加背景色元素
          elements.push({
            type: 'rect',
            css: {
              width: `${width - 40}rpx`,
              height: `${height}rpx`,
              color: background.value,
              top: '20rpx',
              left: '20rpx',
              borderRadius: '20rpx'
            }
          });
        }
      }
    }
    
    // 4. 从模板中获取并处理所有元素
    if (templateData) {
      // 获取当前面的元素
      const templateElements = currentSide === 'front'
        ? templateData.frontElements || []
        : templateData.backElements || [];
        
      console.log(`处理${currentSide}面元素，数量:`, templateElements.length);
      
      // 过滤出需要显示的元素
      const visibleElements = templateElements.filter(el => {
        if (!el || !el.dataField) return false;
        return !displayConfig || displayConfig[el.dataField] !== false;
      });
      
      // 处理每个元素
      visibleElements.forEach(element => {
        const { type, dataField, position, size, style } = element;
        
        // 确保位置和大小有效
        if (!position || !size) {
          console.error('元素缺少位置或尺寸:', element);
          return;
        }
        
        // 计算海报中的实际位置（添加20rpx偏移）
        const x = position.x + 20; // 添加左边距
        const y = position.y + 20; // 添加上边距
        
        // 获取元素内容
        let content = '';
        if (dataField && cardData) {
          content = cardData[dataField] || 
                   (dataField === 'name' ? cardData.title : undefined) ||
                   (dataField === 'avatar' ? cardData.image : undefined) ||
                   element.defaultValue || '';
        } else {
          content = element.defaultValue || '';
        }
        
        // 根据元素类型处理
        if (type === 'text') {
          // 文本元素
          const fontSize = style?.fontSize || 28;
          const fontWeight = style?.fontWeight || 'normal';
          const color = style?.color || '#333333';
          const textAlign = style?.textAlign || 'left';
          
          elements.push({
            type: 'text',
            text: content,
            css: {
              left: `${x}rpx`,
              top: `${y}rpx`,
              width: `${size.width}rpx`,
              fontSize: `${fontSize}rpx`,
              fontWeight: fontWeight,
              color: color,
              textAlign: textAlign,
              maxLines: 3,
              lineHeight: style?.lineHeight ? `${style.lineHeight}rpx` : '1.5'
            }
          });
        } else if (type === 'image' || type === 'qrcode') {
          // 图片或二维码元素
          let imgUrl = content;
          
          // 如果内容为空，使用默认占位图
          if (!imgUrl) {
            imgUrl = type === 'qrcode' 
              ? '/static/images/ecard/qr_placeholder.png'
              : '/static/images/ecard/placeholder.png';
          }
          
          elements.push({
            type: 'image',
            src: imgUrl,
            css: {
              left: `${x}rpx`,
              top: `${y}rpx`,
              width: `${size.width}rpx`,
              height: `${size.height}rpx`,
              borderRadius: style?.borderRadius ? `${style.borderRadius}rpx` : '0'
            }
          });
        } else if (type === 'shape') {
          // 形状元素
          const backgroundColor = style?.backgroundColor || 'transparent';
          const borderWidth = style?.borderWidth || 0;
          const borderColor = style?.borderColor || 'transparent';
          const borderRadius = style?.borderRadius || 0;
          
          elements.push({
            type: 'rect',
            css: {
              left: `${x}rpx`,
              top: `${y}rpx`,
              width: `${size.width}rpx`,
              height: `${size.height}rpx`,
              color: backgroundColor,
              borderWidth: `${borderWidth}rpx`,
              borderColor: borderColor,
              borderRadius: `${borderRadius}rpx`
            }
          });
        }
      });
    } else {
      // 没有模板数据，使用简化的基础布局
      // 添加头像
      if (cardData.avatar || cardData.image) {
        const avatarUrl = cardData.avatar || cardData.image;
        elements.push({
          type: 'image',
          src: avatarUrl,
          css: {
            left: `${width * 0.08 + 20}rpx`,
            top: `${height * 0.2 + 20}rpx`,
            width: `${width * 0.2}rpx`,
            height: `${width * 0.2}rpx`,
            borderRadius: `${width * 0.1}rpx`
          }
        });
      }
      
      // 添加姓名
      if (cardData.name || cardData.title) {
        const name = cardData.name || cardData.title;
        elements.push({
          type: 'text',
          text: name,
          css: {
            left: `${width * 0.35 + 20}rpx`,
            top: `${height * 0.2 + 20}rpx`,
            fontSize: '36rpx',
            fontWeight: 'bold',
            color: '#333333'
          }
        });
      }
      
      // 添加职位
      if (cardData.position) {
        elements.push({
          type: 'text',
          text: cardData.position,
          css: {
            left: `${width * 0.35 + 20}rpx`,
            top: `${height * 0.2 + 60 + 20}rpx`,
            fontSize: '28rpx',
            color: '#666666'
          }
        });
      }
      
      // 添加公司
      if (cardData.company) {
        elements.push({
          type: 'text',
          text: cardData.company,
          css: {
            left: `${width * 0.35 + 20}rpx`,
            top: `${height * 0.2 + 100 + 20}rpx`,
            fontSize: '28rpx',
            color: '#666666'
          }
        });
      }
      
      // 添加电话
      if (cardData.phone) {
        elements.push({
          type: 'text',
          text: `电话：${cardData.phone}`,
          css: {
            left: `${width * 0.08 + 20}rpx`,
            top: `${height * 0.6 + 20}rpx`,
            fontSize: '28rpx',
            color: '#666666'
          }
        });
      }
    }
    
    // 添加底部提示文字
    elements.push({
      type: 'text',
      text: '长按图片保存名片',
      css: {
        bottom: '10rpx',
        right: '30rpx',
        fontSize: '20rpx',
        color: '#999999'
      }
    });
    
    return elements;
  } catch (e) {
    console.error('构建名片海报视图出错:', e);
    // 返回简单的错误海报
    return [
      {
        type: 'rect',
        css: {
          width: `${width}rpx`,
          height: `${height + 60}rpx`, // 增加一些空间显示错误信息
          color: '#FFFFFF',
          borderRadius: '20rpx'
        }
      },
      {
        type: 'text',
        text: '名片生成失败',
        css: {
          top: `${(height + 60) / 2}rpx`,
          left: `${width / 2}rpx`,
          fontSize: '32rpx',
          color: '#666666',
          textAlign: 'center'
        }
      }
    ];
  }
}